<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    

    <script>
      const object1 = {};

      const name = "ceshiname";
      Object.defineProperty(object1, "name", {
        // value: 42,
        // writable: false, // 不可写
        configurable: true,
        // enumerable: false,
        get() {
          return name;
        },
        set(newValue) {
          // watcher(newValue); ---> compiler(newValue) ---> template
          name = newValue;
        },
      });

      // <div>{{a}}</div> // 1 - 2

      // data() {
      //   return {
      //     a: '1'  // 1. 定义数据 object... get set
      //   }
      // },
      // mounted() {
      //   this.a = '2'
      // }

      var age = 38;
      Object.defineProperty(object1, "age", {
        // 使用了方法名称缩写（ES2015 特性）
        // 下面两个缩写等价于：
        // get : function() { return bValue; },
        // set : function(newValue) { bValue = newValue; },
        get() {
          return age;
        },
        set(newValue) {
          age = newValue;
        },
      });

      for (let i in object1) {
        console.log(i, "i");
      }

      // object1.name = 77;
      // throws an error in strict mode

      console.log(object1);
      // expected output: 42

      // var obj = {};

      // Object.defineProperties(obj, {
      //   name: {
      //     value: "我是测试信息",
      //     writable: true,
      //   },
      //   age: {
      //     value: "12",
      //     writable: false,
      //   },
      //   // etc. etc.
      // });

      // console.log("obj1:", obj);
      // obj.name = "我是新的信息";
      // obj.age = "14";
      // console.log("obj2:", obj);
    </script>
  </body>
</html>
